@import url(./common.less);

body, html {
  height: 100%;
  width: 100%;
  min-height: 615px;
  min-width: 1000px;
  //background: url('@{images}/grey_wash_wall.png');
  background: @dark;
  background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:@dark;
  background-size:16px 16px;
  color: @font-default-color;
}

.module-icon-container-wrap {
  position: absolute;
  top: 50%;
  margin-top: -40px;
  height: 80px;
  width: 100%;
  text-align: center;
  .can-click();
}

.module-icon-container {
  margin-left: auto;
  margin-right: auto;
  color: @home-link-color;
}

.module-icon {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0 20px;
  border-radius: 50%;
  .can-click();

  .expand {
    top: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
  }

  span {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
  }

  .icon, .bg-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    transition: all 0.1s ease-in-out;
  }
  .icon {
    background: url("@{images}/home/nav-icon.png") 0 0 no-repeat;
  }
  .bg-layout {
    border-radius: 50%;
  }

  &:hover .bg-layout{
    .expand();
  }

  &.profile {
    .bg-layout {
      background-color: @blue;
    }
    .icon {
      background-position: 0 0px;
    }
  }

  &.movies {
    .bg-layout {
      background-color: @red;
    }
    .icon {
      background-position: -80px 0px;
    }
  }

  &.chat {
    .bg-layout {
      background-color: @green;
    }
    .icon{
      background-position: -160px 0px;
    }
  }

  &.settings {
    .bg-layout {
      background-color: @yellow;
    }
    .icon{
      background-position: -240px 0px;
    }
  }
}

.left-navbar {
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 80px;
  z-index: 9999;
  font-size: 0px;
  background-color: @dark - #111;
  box-shadow: 0 0 10px #000;
  .module-icon {
    width: 80px;
    height: 79px;
    margin: 0;
    border-radius: 0;
    color: white;
    text-align: center;
    border-bottom: 1px solid #464C50 - #111;
    background-color: transparent;
    .can-click();

    &:hover {
      background-color: @dark;
    }
    &.home {
      .icon{
        background: @red url("@{images}/home/logo.png") center no-repeat;
      }
      &:hover {
        background-color: @red - #111;
      }
    }
  }
}

.navbar.navbar-inverse {
  background: transparent;
  border-color: transparent;
  z-index: 1;
}

#menu-btn {
  position: fixed;
  top: 0;
  left: 0;
  height:100%;
  font-size: 30px;
  color: @home-link-color;
}